<template>
    <el-dialog v-model="$store.state.userCenter.userGroup">
        <template #header>
            <span class="font-size-30px">添加用户组</span>
        </template>
        <el-form>
            <el-form-item label="用户组名称">
                <el-input v-model="userGroupName"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="$store.commit('userCenter/userGroupSwitch',false)">取消</el-button>
                <el-button type="primary" @click="handleUserGroup">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted, defineProps } from 'vue'
import { getGroup, getAllGroup } from '@/api/group.js'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
const store = useStore()
//接收从父组件传过来的刷新页面的函数
const props = defineProps({
    refresh: Function
})



//添加用户组
const userGroupName = ref('')
const handleUserGroup = async()=>{
    if(!userGroupName.value) return ElMessage.warning('用户组不能为空')
    const res = await getGroup({name:userGroupName.value})
    if(res.data.success){
        userGroupName.value = ''
        store.commit('userCenter/userGroupSwitch',false)
        ElMessage.success('用户组添加成功')
        props.refresh()
    }
}

</script>
